<template>
  <div class="main">
    <h1 style="text-align: center">v-input-select-tree 测试</h1>
    <el-button type="primary"
               @click="dialogFormVisible = true">新建分组</el-button>

    <el-dialog title="选择数据测试"
               :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称">
          <div class="myinput">
            <VinputSelectTree :dialogWidth="dialogWidth"
                              dialogTitle="选择数据"
                              :inputContent="inputContent"
                              :inputPlaceHolder="inputPlaceHolder"
                              :hasInput="true"
                              :clearable="true"
                              :size="size"
                              :treeData="treeData"
                              :emptyText="emptyText"
                              :defaultProp="defaultProps"
                              :nodeKey="nodeKey"
                              :expandOnClickNode="true"
                              :defaultExpandedKeys="defaultExpandedKeys"
                              :defaultExpandAll="true"
                              :showCheckbox="true"
                              :defaultCheckedKeys="defaultCheckedKeys"
                              :highlightCurrent="true"
                              :checkOnClickNode="false"
                              :checkStrictly="true"
                              :iconClass="iconClass"
                              :lazy="false"
                              :hasRenderContent="false"
                              :filterFields="filterFields"
                              @loadNodeData="loadNode"
                              @handleNodeClick="handleNodeClick"
                              @handleCheckChange="handleCheckChange"
                              @append="append"
                              @remove="remove"
                              @edit="edit"></VinputSelectTree>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import VinputSelectTree from '../input/index'

export default {
  components: { VinputSelectTree },
  data () {
    return {
      dialogWidth: '30%',
      inputContent: '',
      inputPlaceHolder: '请输入内容1',
      size: "small  ",
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      treeData: [{
        id: 1,
        title: '节点1',
        code: 'a',
        children: [{
          id: 4,
          title: '节点 1-1',
          code: 'a',
          children: [{
            id: 9,
            code: 'b',
            title: '节点 1-1-1'
          }, {
            id: 10,
            code: 'c',
            title: '节点 1-1-2'
          }]
        }]
      }, {
        id: 2,
        title: '节点2',
        code: 'd',
        children: [{
          id: 5,
          code: 'a',
          title: '节点 2-1'
        }, {
          id: 6,
          code: 'a',
          title: '节点 2-2'
        }]
      }, {
        id: 3,
        title: '节点 3',
        code: 'e',
        children: [{
          id: 7,
          title: '节点 3-1',
          code: 'a'
        }, {
          id: 8,
          code: 'f',
          title: '节点 3-2',
          disabled: true
        }]
      }],
      emptyText: '没有数据',
      nodeKey: 'id',
      defaultExpandedKeys: [1],
      defaultCheckedKeys: [2],
      iconClass: '',
      filterFields: 'code||title',
      dialogFormVisible: false,
      form: {}
    }
  },
  methods: {
    // 懒加载 lazy 为 true 时候触发
    loadNode (node, resolve) {
      if (node.level === 0) {
        return resolve([{ title: '根节点' }]);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [{
          title: '叶子节点1',
          leaf: true
        }, {
          title: '测试节点'
        }];

        resolve(data);
      }, 500);
    },
    append (data) {
      console.log('append')
    },
    remove (node, data) {
      console.log('remove')
    },
    edit (node, data) {
      console.log('edit')
    },
    // 节点点击事件
    handleNodeClick (data) {
      this.inputContent = data.code
      console.log('节点点击事件')
    },
    handleCheckChange (data, checked, indeterminate) {
      console.log('勾选事件')
    },

    method1 () {

    }
  }
}
</script>
<style scoped>
.myinput >>> .v-input-select-tree .select-tree-body {
  height: 200px;
  overflow: auto;
}
</style>
